<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="主项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemNo">
              <a-input v-model="model.itemNo" placeholder="请输入项目编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemName">
              <a-input v-model="model.itemName" placeholder="请输入项目名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemType">
              <a-select v-model="model.itemType" placeholder="请选择项目类型">
                <a-select-option :value="1">
                  软件项目
                </a-select-option>
                <a-select-option :value="2">
                  硬件项目
                </a-select-option>
              </a-select>
              <!-- <a-input-number v-model="model.itemType" placeholder="请输入项目类型（1.软件项目2.硬件项目3.混合项目）" style="width: 100%" /> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="合同总价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalContractPrice">
              <a-input v-model="model.totalContractPrice" placeholder="请输入合同总价"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="运维比例(%)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proportion">
              <a-input v-model="model.proportion" placeholder="请输入运维比例"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="软件套数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="softwareSetsNum">
              <a-input-number v-model="model.softwareSetsNum" placeholder="请输入软件套数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12" >
            <a-form-model-item label="硬件到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hardwareExpirTime">
              <j-date placeholder="请选择硬件到期时间" v-model="model.hardwareExpirTime" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="12" >
            <a-form-model-item label="软件到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="softwareExpirTime">
              <j-date placeholder="请选择软件到期时间" v-model="model.softwareExpirTime" style="width: 100%" /> 
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="软件授权类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="softwareLicenseType">
              <a-select v-model="model.softwareLicenseType" placeholder="请选择项目类型">
                <a-select-option :value="1">
                  年付费
                </a-select-option>
                <a-select-option :value="2">
                  永久产权
                </a-select-option>
                <a-select-option :value="3">
                  永有截止日
                </a-select-option>
              </a-select>
              <!-- <a-input-number v-model="model.softwareLicenseType" placeholder="请输入软件授权类型（1.年付费2.永久产权3.有截止日）" style="width: 100%" /> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="是否放弃维保" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isAbandonMaintenance">
              <a-select v-model="model.isAbandonMaintenance" placeholder="请选择项目类型">
                <a-select-option :value="1">
                  否
                </a-select-option>
                <a-select-option :value="2">
                  是
                </a-select-option>
              </a-select>
              <!-- <a-input-number v-model="model.isAbandonMaintenance" placeholder="请输入是否放弃维保（1.否2.是）" style="width: 100%" /> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目责任人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectProjectPeoper">
              <!-- <a-input v-model="model.projectProjectPeoper" placeholder="请输入项目责任人"></a-input> -->
              <a-select v-model="model.projectProjectPeoper" placeholder="请选择项项目责任人" v-on:focus="changeClient">
                <a-select-option v-for="item in items" :value="item.realname" :key="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商/客户联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contacts">
              <a-input v-model="model.contacts" placeholder="供应商/客户联系人"></a-input>
            </a-form-model-item>
          </a-col>


          <a-col :span="12">
            <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enclosure">
              <j-upload v-model="model.enclosure"></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12" >
            <a-form-model-item label="是否删除（0正常1.删除）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deleted">
              <a-input-number v-model="model.deleted" placeholder="请输入是否删除（0正常1.删除）" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="软件维保/租用计划明细表" :key="refKeys[0]" :forceRender="true">
        <j-editable-table :ref="refKeys[0]" :loading="chMaintenancePlanDetailTable.loading"
          :columns="chMaintenancePlanDetailTable.columns" :dataSource="chMaintenancePlanDetailTable.dataSource"
          :maxHeight="300" :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :actionButton="true" 
          :customRow='customRow'
          />
      </a-tab-pane>
      <a-tab-pane tab="硬件维保/租用计划明细表" :key="refKeys[1]" :forceRender="true">
        <j-editable-table :ref="refKeys[1]" :loading="chHardwareMaintenancePlanDetailTable.loading"
          :columns="chHardwareMaintenancePlanDetailTable.columns"
          :dataSource="chHardwareMaintenancePlanDetailTable.dataSource" :maxHeight="300" :disabled="formDisabled"
          :rowNumber="true" :rowSelection="true" :actionButton="true" 
          :customRow='customRow'
          />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'ChSoftwareOperationPlanForm',
  mixins: [JEditableTableModelMixin],
  components: {
  },
  data() {
    return {
      items: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        itemType: 1,
        softwareLicenseType: 1,
        isAbandonMaintenance: 1,
        proportion: '10',
        projectProjectPeoper: '李纳'
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        // name: [
        //   { required: true, message: 'Please input Activity name', trigger: 'blur' },
        //   { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        // ],
        // region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        // date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        // proportion: [
        //   { required: true, message: '请输入运维比例',trigger: 'change'},
        //   { type: 'number', message: '请输入数字'}
        // ],
      },
      refKeys: ['chMaintenancePlanDetail', 'chHardwareMaintenancePlanDetail',],
      tableKeys: ['chMaintenancePlanDetail', 'chHardwareMaintenancePlanDetail',],
      activeKey: 'chMaintenancePlanDetail',
      // 软件维保/租用计划明细表
      chMaintenancePlanDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '维保开始日期',
            key: 'maintenanceStartDate',
            type: FormTypes.date,
            width: "130px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '维保结束日期',
            key: 'maintenanceEndDate',
            type: FormTypes.date,
            width: "130px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '维保/租用金额(元)',
            key: 'amount',
            type: FormTypes.inputNumber,
            width: "130px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '软件授权截止日期',
            key: 'authorizationDeadline',
            type: FormTypes.date,
            width: "130px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '数量',
            key: 'num',
            type: FormTypes.input,
            width: "100px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input_pop,
            width: "500px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          // {
          //   title: '软件运维计划id',
          //   key: 'chMaintenancePlanId',
          //   type: FormTypes.input,
          //   width:"200px",
          //   placeholder: '请输入${title}',
          //   defaultValue:'',
          // },
        ]
      },
      // 硬件维保/租用计划明细表
      chHardwareMaintenancePlanDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '硬件维保开始日期',
            key: 'maintenanceStartDate',
            type: FormTypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '硬件维保结束日期',
            key: 'maintenanceEndDate',
            type: FormTypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '维保/租用金额(元)',
            key: 'amount',
            type: FormTypes.inputNumber,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '硬件授权截止日期',
            key: 'authorizationDeadline',
            type: FormTypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          // {
          //   title: '软件运维计划id',
          //   key: 'chMaintenancePlanId',
          //   type: FormTypes.input,
          //   width:"200px",
          //   placeholder: '请输入${title}',
          //   defaultValue:'',
          // },
        ]
      },
      url: {
        add: "/ch/chSoftwareOperationPlan/add",
        edit: "/ch/chSoftwareOperationPlan/edit",
        queryById: "/ch/chSoftwareOperationPlan/queryById",
        chMaintenancePlanDetail: {
          list: '/ch/chSoftwareOperationPlan/queryChMaintenancePlanDetailByMainId'
        },
        chHardwareMaintenancePlanDetail: {
          list: '/ch/chSoftwareOperationPlan/queryChHardwareMaintenancePlanDetailByMainId'
        },
        queryLoginUsersByDeptId: '/ch/chSoftwareOperationPlan/queryLoginUsersByDeptId'

      },
      
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
  },
  methods: {
    // 行事件
    customRow(record){
      console.log("行事件",record);
      return {
      on: { // 事件
        // click: (event) => {},       // 点击行
        // dblclick: (event) => {},
        // contextmenu: (event) => {},
        mouseenter: (event) => {
          console.log("鼠标移入",event);
        },  // 鼠标移入行
        mouseleave: (event) => {
          console.log("鼠标移出",event);
        }
      },

    };
    },
    // 下拉选择负责人触发
    changeClient() {
      getAction(this.url.queryLoginUsersByDeptId).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.items = res.result
        }
      })
      console.log('items', this.items);
    },
    addBefore() {
      this.chMaintenancePlanDetailTable.dataSource = []
      this.chHardwareMaintenancePlanDetailTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.chMaintenancePlanDetail.list, params, this.chMaintenancePlanDetailTable)
        this.requestSubTableData(this.url.chHardwareMaintenancePlanDetail.list, params, this.chHardwareMaintenancePlanDetailTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([
        ]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_NO_PASSED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        chMaintenancePlanDetailList: allValues.tablesValue[0].values,
        chHardwareMaintenancePlanDetailList: allValues.tablesValue[1].values,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },

  }
}
</script>

<style scoped>

</style>